<script setup>
import { userStore } from '@/stores/user.js'
import QrcodeVue from 'qrcode.vue'
import coupon from '../components/coupon/Coupon.vue'
import {useRoute} from "vue-router"
const route = useRoute()
const scenicId = route.params.id
console.log('scenicId', scenicId)


const user = userStore()

console.log('position', user.position)
console.log('经度' , user.position?.coords?.longitude)
console.log('维度' , user.position?.coords?.latitude)

const ageAddOneCkick = () => {
  user.userInfo.age++
}
const ageAddTwoCkick = () => {
  user.$patch({
    userInfo: {
      ...user.userInfo,
      age: user.userInfo.age + 2
    }
  })
}
const ageReduceCkick = () => {
  user.setUserAge(user.userInfo.age - 1)
}

const qrcodeData = {
  src: '1234567890', 
  size: 300
}


</script>

<template>
  <div class="page">
    <span>我{{ user.userInfo.age }}岁</span>
    <div class="button_list">
      <van-button type="primary" @click="ageAddOneCkick">+1</van-button>
      <van-button type="primary" @click="ageAddTwoCkick">+2</van-button>
      <van-button type="success" @click="ageReduceCkick">-1</van-button>
    </div>
    <qrcode-vue :value="qrcodeData.src" :size="qrcodeData.size" level="H" />
  </div>
  <coupon :couponList="[{id:123,checked:false,price:123}]"/>
</template>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
